import React from "react";
import i18next from "i18next";
import Page from "../../components/Page";
import {
    PledgeItem,
    Content,
    CoinLogo,
    CoinNav,
    CoinNavMobile,
    DangerTip,
    CountDown,
    TotalLockView,
    FlexViewCenter,
    SwitchButton,
    FlexView, CountDownNyc, MobileView, FlexViewBetween
} from "../../components/components";
import styled from "styled-components";
import ImageCommon from "../../assets/image/common/ImageCommon";
import { StyledTopBar } from "../../components/TopBar/TopBar";
import {useUpdateLogo} from "../../state/logoaction/hooks";
import {colors} from "../../common/common";
import useTotalTvl from "../../hooks/useTotalTvl";
import {useV1} from "../../state/v1action/hooks";
import useNYCPrice from "../../hooks/useNYCPrice";
const coins = ["MDX","USDT","wHT","wETH","HBTC","TPT","LAVA","HUSD","FILDA"];
const coins_s = ["sCASH","SHARE","sHT","sNEO","sFILDA","sNULS"];
const coins_f = ["fUSDT","fHUSD","fHT","fHBTC","fHLTC","fHDOT","fHFIL","fETH","fNEO"];
const coins_p = ["pNEO","ELA","YNC"];

const Home = React.memo(()=>{
    const v2 = useV1();
    const price = useNYCPrice();
    useUpdateLogo(ImageCommon.logo);
    const [showCountDown,setCountDown] = React.useState(true);
    React.useEffect(()=>{
        setCountDown(i18next.language=='zh')
    },[i18next.language]);
    // const totalTvl = useTotalTvl();
    const [totalTvl,setTotalTvl] = React.useState(0);

    return(
        <Page>
            {/* 鱼卡商店 */}
            {/* <PageShows>
            <MyFishCard>
                <MyFishTitHeadCont>
                <MyFishTitHead>
                    <div></div>
                    <MyFishTit>鱼卡商店</MyFishTit>
                    <img
                    src={ImageCommon.img_close}
                    width={18}
                    height={18}
                    />
                </MyFishTitHead>
                <MyFishTitDesc>
                    <DescFlex1>
                        <DescFlex2>
                            <DescBtn1>
                                待兑换NYC
                            </DescBtn1>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                        <DescFlex2>
                            <DescBtn2>
                            NYC余额
                            </DescBtn2>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                    </DescFlex1>
                    <DescFlexRight>
                            <DescBtn3>
                            我的鱼卡
                            </DescBtn3>
                            <SpanRightc> 前往LAVA进行获取NYC  </SpanRightc>
                    </DescFlexRight>
                </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    <FishCardsb>
                    <img
                    src={ImageCommon.greenbg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />

                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>兑换 (10NYC)</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.bluebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>兑换 (10NYC)</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.orangebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>兑换 (10NYC)</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.orangebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>兑换 (10NYC)</FishdiBitn>
                    </FishCardsb>
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
            </PageShows> */}


            {/* 鱼卡商店 */}
            {/* <PageShows>
            <MyFishCard>
                <MyFishTitHeadCont>
                <MyFishTitHead>
                    <div></div>
                    <MyFishTit>我的鱼卡</MyFishTit>
                    <img
                    src={ImageCommon.img_close}
                    width={18}
                    height={18}
                    />
                </MyFishTitHead>
                <MyFishTitDesc>
                    <DescFlex1>
                        <DescFlex2>
                            <DescBtn1>
                                待兑换NYC
                            </DescBtn1>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                        <DescFlex2>
                            <DescBtn2>
                            NYC余额
                            </DescBtn2>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                    </DescFlex1>
                    <DescFlexRight>
                            <DescBtn3>
                            我的鱼卡
                            </DescBtn3>
                            <SpanRightc> 前往LAVA进行获取NYC  </SpanRightc>
                    </DescFlexRight>
                </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    <FishCardsb>
                    <img
                    src={ImageCommon.greenbg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />

                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000 <Zhiya>质押</Zhiya> </FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>质押挖矿</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.bluebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000 </FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>质押挖矿</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.orangebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>质押挖矿</FishdiBitn>
                    </FishCardsb>

                    <FishCardsb>
                    <img
                    src={ImageCommon.orangebg_big}
                    width={230}
                    height={390}
                    style={{position: 'absolute', top:0 , left: 0,zIndex: -1,}}
                    />
                    <img
                    src={ImageCommon.fish01}
                    width={160}
                    height={160}
                    style={{marginTop: -36,}}
                    />
                    <FishCSpanTit>炸弹鱼(普通)</FishCSpanTit>
                    <FishCSpanXian></FishCSpanXian>
                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                    <FishYukuai>
                        <FishziConts>
                            <FishZizuo>颜色:</FishZizuo>
                            <FishZiyou>绿色</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>NYC值:</FishZizuo>
                            <FishZiyou>12,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>LP值:</FishZizuo>
                            <FishZiyou>20,000</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>基因卡槽:</FishZizuo>
                            <FishZiyou>头鱼</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>品质:</FishZizuo>
                            <FishZiyou>
                            <img
                            src={ImageCommon.img_star}
                            width={13}
                            height={13}
                            style={{marginLeft:5}}
                            />
                            </FishZiyou>
                        </FishziConts>
                    </FishYukuai>
                    <FishdiBitn>质押挖矿</FishdiBitn>
                    </FishCardsb>
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
            </PageShows> */}

            {/* 质押 */}
            {/* <PageShows>
            <MyFishCard>
                <MyFishTitHeadCont>
                <MyFishTitHead>
                    <div></div>
                    <MyFishTit>质押</MyFishTit>
                    <img
                    src={ImageCommon.img_close}
                    width={18}
                    height={18}
                    />
                </MyFishTitHead>
                <MyFishTitDesc>
                    <DescFlex1>
                        <DescFlex2>
                            <DescBtn1>
                                待兑换NYC
                            </DescBtn1>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                        <DescFlex2>
                            <DescBtn2>
                            NYC余额
                            </DescBtn2>
                            <DescText>
                                3,000,000
                            </DescText>
                        </DescFlex2>
                    </DescFlex1>
                    <DescFlexRight>
                            <DescBtn3>
                            我的鱼卡
                            </DescBtn3>
                            <SpanRightc> 前往LAVA进行获取NYC  </SpanRightc>
                    </DescFlexRight>
                </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    <ZhiyaContCard>
                        <ZhiyaPosi>
                            <Zhiyapip>炸弹鱼(普通）</Zhiyapip>
                            <img
                            src={ImageCommon.img_zhiya}
                            width={191}
                            height={121}
                            />
                        </ZhiyaPosi>
                        <ZhiyaBtnzy>质押</ZhiyaBtnzy>
                        <ZhiyaTiquBtn>提取</ZhiyaTiquBtn>
                    </ZhiyaContCard>

                    <ZhiyaContCard>
                        <ZhiyaPosi>
                            <img
                            src={ImageCommon.img_tianjia}
                            width={191}
                            height={121}
                            />
                        </ZhiyaPosi>
                        <ZhiyaBtnzy>质押</ZhiyaBtnzy>
                        <ZhiyaTiquBtn>提取</ZhiyaTiquBtn>
                    </ZhiyaContCard>

                    <ZhiyaContCard>
                        <ZhiyaPosi>
                            <img
                            src={ImageCommon.img_tianjia}
                            width={191}
                            height={121}
                            />
                        </ZhiyaPosi>
                        <ZhiyaBtnzy>质押</ZhiyaBtnzy>
                        <ZhiyaTiquBtn>提取</ZhiyaTiquBtn>
                    </ZhiyaContCard>
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
            </PageShows> */}

            {/* 小弹窗 */}
            {/* <Xiaotan1>
                    <img
                    src={ImageCommon.bg_tan}
                    width={300}
                    height={130}
                    />
                    <img
                    src={ImageCommon.img_close}
                    width={18}
                    height={18}
                    style={{position: 'absolute', right: 10, top: 10,}}
                    />

                    <XiaotanDivCon>
                        <XiaotanSpan>选择数量：</XiaotanSpan>
                        <XiaotandivFlex>
                        <img
                    src={ImageCommon.img_add}
                    width={14}
                    height={14}
                    />
                        <input type="text" style={{width: 80,height: 30, background: '#FFEFE3', borderRadius: 10, textAlign: 'center', border: 'none', margin: '0 5px'}}/>
                        <img
                    src={ImageCommon.img_jian}
                    width={14}
                    height={14}
                    />
                        </XiaotandivFlex>
                    </XiaotanDivCon>

                    <XiaotanDivCon>
                        <XiaotanSpan>所需NYC：</XiaotanSpan>
                        <input type="text" style={{width:120,height: 30, background: '#FFEFE3', borderRadius: 10, textAlign: 'center', border: 'none'}}/>
                    </XiaotanDivCon>
                    <XiaotanDivCon1>
                    <XiaotanTishi>NYC余额不足，请充值NYC</XiaotanTishi>
                    </XiaotanDivCon1>
                    <XiaotanDivCon1>
                    <XiaotanBtns1>兑换</XiaotanBtns1>
                    </XiaotanDivCon1>
            </Xiaotan1> */}
            {/* 弹窗成功提示 */}
            {/* <Xiaotan1>
                    <img
                    src={ImageCommon.bg_tan}
                    width={300}
                    height={130}
                    />
                    <img
                    src={ImageCommon.img_close}
                    width={18}
                    height={18}
                    style={{position: 'absolute', right: 10, top: 10,}}
                    />

                    <XiaotanDivCon2>
                    <XiaotanTishiTexr>恭喜您，兑换成功！</XiaotanTishiTexr>
                    <XiaotanTishiTexr1>10个炸弹鱼（普通）</XiaotanTishiTexr1>
                    </XiaotanDivCon2>
                    <XiaotanDivCon1>
                    <XiaotanBtns1>继续兑换</XiaotanBtns1>
                    </XiaotanDivCon1>
            </Xiaotan1> */}

            <StyledTopBar
                bg={ImageCommon.banner_ocean}
            >
                <CoinLogo
                    v2={v2}
                ></CoinLogo>
                <CoinNav></CoinNav>
                <CoinNavMobile></CoinNavMobile>
            </StyledTopBar>
            <Content>
                <MobileView>
                    <div
                        style={{width:'80%',marginLeft:'auto',marginRight:'auto'}}
                    >
                        <FlexViewBetween>
                            <div
                                style={{color:colors.main,fontWeight:'bold'}}
                            >Price:{price.toFixed(4)}</div>
                            <SwitchButton></SwitchButton>
                        </FlexViewBetween>
                    </div>
                </MobileView>
                <FlexViewCenter>
                    <CountDown></CountDown>
                </FlexViewCenter>
                <FlexViewCenter>
                    <TotalLockView
                        title={"Total Value Locked:"}
                        amount={"$"+totalTvl.toFixed(4)}
                    ></TotalLockView>
                </FlexViewCenter>
                {showCountDown && <>
                    <DangerTip></DangerTip>
                </>}
                <PledgeWrap>
                    {coins.map((item,index)=>{
                        return(
                            <PledgeItem
                                key={'item_'+index}
                                coin={item}
                                setCount={(n:number)=>setTotalTvl(totalTvl+n)}
                                v2={v2}
                            ></PledgeItem>
                        )
                    })}
                </PledgeWrap>
                <PledgeWrap>
                    {coins_f.map((item,index)=>{
                        return(
                            <PledgeItem
                                key={'item_'+index}
                                coin={item}
                                setCount={(n:number)=>setTotalTvl(totalTvl+n)}
                                v2={v2}
                            ></PledgeItem>
                        )
                    })}
                </PledgeWrap>
                <PledgeWrap>
                    {coins_s.map((item,index)=>{
                        return(
                            <PledgeItem
                                key={'item_'+index}
                                coin={item}
                                setCount={(n:number)=>setTotalTvl(totalTvl+n)}
                                v2={v2}
                            ></PledgeItem>
                        )
                    })}
                </PledgeWrap>

                {v2 && <PledgeWrap>
                    {coins_p.map((item,index)=>{
                        return(
                            <PledgeItem
                                key={'item_'+index}
                                coin={item}
                                setCount={(n:number)=>setTotalTvl(totalTvl+n)}
                                v2={v2}
                            ></PledgeItem>
                        )
                    })}
                </PledgeWrap>}

            </Content>
        </Page>
    )
})

export default Home;

const Body = styled.div`
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
`

export const PledgeWrap = styled(FlexViewBetween)`
    display:flex;
    flex-wrap:wrap;
    padding:50px;
    border: 2px solid #F27405;
    border-radius: 20px;
    background-color:${colors.FFFAF6};
    margin-bottom:50px;
    @media (max-width: 768px) {
       padding:0;
       border:0px solid #F27405;
       margin-bottom:0px;
       background-color:${colors.transparent};
       margin-bottom:30px;
       justify-content:center;
    };
`

const PageShows = styled.div`
    position:  absolute;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
`

const MyFishCard = styled.div`
    position: relative;
    z-index: 88;
    top: 2%;
    left: 50%;
    margin: 0 0 0 -25%;
    width: 100%;
    max-width: 800px;
    height: 920px;
    background: #FFFFFF;
    border-radius: 20px;
`

const MyFishTitHeadCont = styled.div`
    width: 100%;
    background: linear-gradient(0deg, #F27405, #FFA82B);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 17px;
`

const MyFishTitDesc = styled.div`
    height: 110px;
    margin: 0 18px;
    background: #D26300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display:flex;
`

const DescFlex1 = styled.div`
display:flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

`

const DescFlexRight = styled.div`
display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-right: 20px;
`

const DescFlex2 = styled.div`
display:flex;
flex-direction: row;
align-items: center;
`

const DescBtn1 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #FFBB7F;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
`

const DescBtn2 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #96CAFF;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
`

const DescBtn3 = styled.div`
width: 110px;
line-height: 30px;
background: #FFBB7F;
border-radius: 15px;
text-align: center;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
`

const DescText = styled.div`
margin-left: 9px;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
`

const MyFishTitHead= styled.div`
width: 100%;
height: 56px; 
display:flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
`

const MyFishTit = styled.span`
line-height: 56px;
font-size: 20px;
font-family: FZCuYuan-M03S;
font-weight: 400;
color: #FFFFFF;
`

const SpanRightc = styled.span`
line-height: 18px;
font-size: 16px;
font-family: PingFang SC;
text-decoration: underline;
color: #FFFFFF;
margin-top: 15px;
`

const FishConts = styled.div`
width: 100%;
height: 605px; 
padding: 21px 35px;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
`

const FishCardsb = styled.div`
width: 230px;
height: 390px; 
position: relative;
margin-top: 51px;
display:flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
`

const FishCSpanTit = styled.span`
margin-top: 10px;
text-align: center;
line-height: 18px;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const FishCSpanXian = styled.div`
width:100%;
border-bottom: 1px dashed #ffffff;
margin-top: 12px; 
`

const FishCSpanYuka = styled.span`
text-align: center;
line-height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-top: 10px;
`

const FishYukuai = styled.div`
width: 190px;
background: rgba(255,255,255,0.42);
margin-top: 11px;
padding: 10px 0;
`

const FishziConts = styled.div`
display: flex;
flex: 1;
`

const FishZizuo = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: right;
flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
`

const FishZiyou = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: left;
flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
`

const FishdiBitn = styled.div`
text-align: center;
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-top: 20px;
`

const FishGuize = styled.div`
height: 90px;
background: #FFEFE3;
border-radius: 10px;
margin: 20px 35px;
padding: 5px 16px;
`

const FishGuizeTit = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #F27405;
`

const FishGuizeDesc = styled.div`
line-height: 41px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 24px;
`

const Zhiya = styled.span`
width: 42px;
text-align: center;
background: #F27405;
border-radius: 8px;
line-height: 18px;
font-size: 12px;
margin-left: 2px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
`

const ZhiyaContCard = styled.div`
width: 230px;
height: 260px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #FFE4CC;
border-radius: 20px;
display: flex;
flex-direction: column;
    justify-content: end;
    align-items: center;
`

const ZhiyaPosi = styled.div`
position: relative;
width: 191px;
margin-top: 20px;
`

const Zhiyapip = styled.div`
position: absolute;
width: 131px;
line-height: 32px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 30px;
top: 0;
background: #000000;
color: #FFFFFF;
text-align: center;
`

const ZhiyaBtnzy = styled.div`
width: 160px;
background: #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
`

const ZhiyaTiquBtn= styled.div`
width: 160px;
border: 1px solid #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #F27405;
text-align: center;
margin-top: 10px;
`

const Xiaotan1 = styled.div`
position: fixed;
    z-index: 89;
    top: 50%;
    left: 50%;
    margin: -20% 0 0 -150px;
width: 300px;
z-index: 100;
background: #fff;
border-radius: 10px;
`

const XiaotanSpan = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const XiaotanDivCon = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 30px;
`

const XiaotanDivCon1 = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanDivCon2 = styled.div`
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanTishi = styled.span`
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanTishiTexr = styled.div`
font-size: 18px;
line-height: 30px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 16px;
padding: 0 30px;
`

const XiaotanTishiTexr1 = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanBtns1 = styled.div`
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
`

const XiaotandivFlex = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
`
